<template>
	<view >
		<view class="d-flex j-sb a-center">
			<view class="font-lg font-weight">柜机信息</view>
			<view class="rounded bg-primary button font-md text-white d-flex a-center j-center"  @click="popupRef.open()">编辑</view>
		</view>
		
		<uni-forms labelWidth="46rpx" >
			<uni-forms-item class="mt-1" label="设备名称:" name="name">
				<uni-easyinput disabled  type="text" v-model="device.name" placeholder="请输入设备名称" />
			</uni-forms-item>
			<uni-forms-item class="mt-1" label="箱柜数量:" name="number">
				<uni-easyinput disabled  type="number" v-model="device.number" placeholder="请输入箱柜数量" />
			</uni-forms-item>
		</uni-forms>

				
		<uni-popup ref="popupRef" type="center">
			<view class="p-2 bg-white model-shell ">
				<view class="font-lg font-weight">编辑设备配置</view>
				<view class="px-2 mt-2 font-md">
					<uni-forms labelWidth="46rpx" >
						<uni-forms-item class="mt-1" label="设备名称:" name="name">
							<uni-easyinput  type="text" v-model="device.name" placeholder="请输入设备名称" />
						</uni-forms-item>
						<uni-forms-item class="mt-1" label="箱柜数量:" name="number">
							<uni-easyinput   type="number" v-model="device.number" placeholder="请输入箱柜数量" />
						</uni-forms-item>
					</uni-forms>
					
					<view class="d-flex mt-3 ">
						<view class="flex-1 px-1 d-flex a-center j-center">
							<view class="rounded bg-secondary button font-md text-white" @click="popupRef.close()">取消</view>
						</view>
						<view class="flex-1 px-1 d-flex a-center j-center">
							<view class="rounded bg-primary button font-md text-white" type="primary" @click="onsave">保存</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive,defineExpose } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useStore } from '@/store/index.js';
const store = useStore();
const device = ref({});
const popupRef = ref(null);

const onsave = () => {
	store.deviceStore.save(device.value);
	popupRef.value.close();
};

const reload = () => {
	device.value = store.deviceStore.data;
};

const onEdit = () => {
	popupRef.value.open();
};

onLoad(() => {
	reload();
});

defineExpose({onEdit})
</script>

<style lang="scss" scoped>
.button {
	width: 60rpx;
	height: 20rpx;
}
.model-shell {
	width: 300rpx;
	// height: 220rpx;
	border-radius: 6rpx;
	.form-label {
		text-align: right;
		width: 50rpx;
	}
}
</style>
